import React from 'react';
import { GoodsStyle } from './style';
import type { HandleGoods } from './GoodsList';

export type GoodsProps = {
  gid: number | string;
  gimg: string;
  name: string;
  goodsdetail?: string;
  gprice: number;
  plusGoods: HandleGoods;
  reduceGoods: HandleGoods;
  num: number;
  rawGoods: any;
};

const noImg =
  'https://res.lexiangpingou.cn/images/826/2021/05/nW9PwZfalG9pmEwFtp0s6lpxteev9V.png';

const Goods: React.FC<GoodsProps> = (props) => {
  return (
    <GoodsStyle>
      <li className="goods">
        <div className="goods-left">
          <img src={props.gimg ? props.gimg : noImg} alt="" />
        </div>
        <div className="goods-right">
          <span className="goods-name">{props.name}</span>
          <span className="goods-detail">{props.goodsdetail}</span>
          <div className="goods-right-bottom">
            <span className="goods-price">￥{props.gprice}</span>

            {props.num <= 0 ? (
              <div
                className="goods-num flex-row"
                style={{
                  justifyContent: 'flex-end',
                }}
              >
                <img
                  src="https://res.lexiangpingou.cn/images/826/2021/05/trErQAi2W2Lew3M52MIa24I0o513Q5.png"
                  alt=""
                  className="plus"
                  onClick={() => {
                    props.plusGoods({
                      gid: props.gid,
                      name: props.name,
                      price: props.gprice,
                      num: props.num,
                      gimg: props.gimg,
                      barcode: props.rawGoods.barcode,
                      changeunitname: props.rawGoods.changeunitname,
                      unit: props.rawGoods.unit,
                      categoryid: props.rawGoods.categoryid,
                    });
                  }}
                />
              </div>
            ) : (
              <div className="goods-num flex-row">
                <img
                  src="https://res.lexiangpingou.cn/images/826/2021/05/cNj6NA7NN6VNaLsvA2I8LZPPaVS8nm.png"
                  alt=""
                  className="reduce"
                  onClick={() => {
                    props.reduceGoods({
                      gid: props.gid,
                      name: props.name,
                      price: props.gprice,
                      num: props.num,
                      gimg: props.gimg,
                      barcode: props.rawGoods.barcode,
                      changeunitname: props.rawGoods.changeunitname,
                      unit: props.rawGoods.unit,
                      categoryid: props.rawGoods.categoryid,
                    });
                  }}
                />
                <span className="num">{props.num}</span>
                <img
                  src="https://res.lexiangpingou.cn/images/826/2021/05/trErQAi2W2Lew3M52MIa24I0o513Q5.png"
                  alt=""
                  className="plus"
                  onClick={() => {
                    props.plusGoods({
                      gid: props.gid,
                      name: props.name,
                      price: props.gprice,
                      num: props.num,
                      gimg: props.gimg,
                      barcode: props.rawGoods.barcode,
                      changeunitname: props.rawGoods.changeunitname,
                      unit: props.rawGoods.unit,
                      categoryid: props.rawGoods.categoryid,
                    });
                  }}
                />
              </div>
            )}
          </div>
        </div>
      </li>
    </GoodsStyle>
  );
};

export default Goods;
